@charset "utf-8";

html, body {
  height: 100%;
  margin: 0;
  position: relative;
  background: url('../img/bgg.jpg') top center no-repeat, #060606;
  background-size: cover; /* Consider switching this to 'contain' if it doesn't need to stretch */
  background-attachment: fixed; /* Improves background image performance on scroll */
}

body::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0); /* Default no overlay */
  z-index: 1;
  pointer-events: none; /* Ensures it doesn't interfere with other interactions */
}

/* Remove hover transition for performance */
body:hover::after { 
  background: rgba(0, 0, 0, 0.5); 
}

/* Apply z-index optimization directly to all children */
body * { position: relative; z-index: 2; }

label, h5 { color: #747474; }

.container { 
  max-width: 600px; 
  padding: 20px; 
}

.profile-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
}

.profile-header h2 { 
  font-size: 24px; 
  margin-bottom: 20px; 
  color: #333; 
}

.profile-image img { 
  width: 120px; 
  height: 120px; 
  border-radius: 50%; 
  object-fit: cover; 
  margin-bottom: 20px; 
}

.profile-info { 
  font-size: 16px; 
  color: #555; 
}
.profile-info p { 
  margin: 10px 0; 
}
.profile-info strong { 
  color: #333; 
}

.profile-footer { 
  margin-top: 20px; 
}

button {
  padding: 10px 20px; 
  font-size: 16px; 
  border: none; 
  cursor: pointer; 
  border-radius: 5px; 
  margin: 5px;
}

.edit-button { 
  background: #4CAF50; 
  color: white; 
}
.edit-button:hover { 
  background: #45a049; 
}

.logout-button { 
  background: #f44336; 
  color: white; 
}
.logout-button:hover { 
  background: #e53935; 
}